<template>
  <div class="mod-admin__education">
    <div class="top-search">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" label-position="top">
        <div class="top-search_form">
          <div class="ttop-search_form_input">
            <el-form-item :label="$t('student.name')">
              <el-input v-model="state.dataForm.name" :placeholder="$t('input')" clearable></el-input>
            </el-form-item>
          </div>
          <div class="top-search_form_btn">
            <el-form-item>
              <el-button @click="state.getDataList()">{{ $t("reset") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="leadingInHandle()">导入</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="uploadBatchHandle">批量上传照片</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div class="content">
      <el-row>
        <el-col :span="4">
          <el-tree :data="state.deptList" :props="defaultProps" default-expand-all highlight-current ref="treeRef"
            @node-click="nodeCilck"></el-tree>
        </el-col>
        <el-col :span="1" style="display: flex;justify-content: center;">
          <el-divider style="height: calc(100vh - 300px)" direction="vertical"></el-divider>
        </el-col>
        <el-col :span="19">
          <div class="content-btns">
            <el-button type="primary" @click="addOrUpdateHandle()">{{
        $t("add") }}</el-button>
            <!-- <el-button v-if="state.hasPermission('sys:user:export')" type="info"
                            @click="state.exportHandle()">{{
                                $t("import") }}</el-button> -->
          </div>
          <el-table v-loading="state.dataListLoading" :data="state.dataList"
            @sort-change="state.dataListSortChangeHandle" style="width: 100%;height: calc(100vh - 390px);">
            <el-table-column prop="imageUrl" :label="$t('student.imageUrl')" sortable="custom" header-align="center"
              align="center">
              <template v-slot="scope">
                <el-image style="width: 60px; height: 60px" :src="scope.row.imageUrl" fit="cover"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('student.name')" sortable="custom" header-align="center"
              align="center"></el-table-column>
            <el-table-column prop="gender" :label="$t('student.gender')" sortable="custom" header-align="center"
              align="center">
              <template v-slot="scope">
                <el-tag type="primary" v-if="scope.row.gender === 1">
                  {{ state.getDictLabel("gender", scope.row.gender) }}
                </el-tag>
                <el-tag type="danger" v-else-if="scope.row.gender === 0">
                  {{ state.getDictLabel("gender", scope.row.gender) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sid" :label="$t('student.sid')" sortable="custom" header-align="center"
              align="center"></el-table-column>
            <!-- <el-table-column prop="classId" :label="$t('student.class')" sortable="custom"
                            header-align="center" align="center"></el-table-column> -->
            <el-table-column prop="status" :label="$t('student.status')" sortable="custom" header-align="center"
              align="center">
              <template v-slot="scope">
                {{ state.getDictLabel("student_status", scope.row.status) }}
              </template>
            </el-table-column>
            <el-table-column prop="entryTime" :label="$t('student.entryTime')" sortable="custom" header-align="center"
              align="center">
              <template v-slot="scope">
                {{ scope.row.entryTime ? dayjs(scope.row.entryTime).format('YYYY-MM-DD') : '' }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
              <template v-slot="scope">
                <el-button v-if="state.hasPermission('sys:user:update')" type="primary" link
                  @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
                <el-button v-if="state.hasPermission('sys:user:delete')" type="primary" link
                  @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
            :total="state.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
    <!-- 导入 -->
    <leading-in ref="leadingInRef" @refreshDataList="state.getDataList"></leading-in>
    <!-- 批量上传照片 -->
    <upload-batch ref="uploadBatchRef" @refreshDataList="state.getDataList"></upload-batch>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { onMounted, reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./student-add-or-update.vue";
import UploadBatch from "./student-upload-batch.vue";
import { ElMessageBox, ElMessage, dayjs } from 'element-plus';
import { useI18n } from "vue-i18n";
import baseService from "@/service/baseService";
const { t } = useI18n()

const view = reactive({
  getDataListURL: "/data/personnel/student/page",
  getDataListIsPage: true,
  deleteURL: "/data/personnel/student",
  deleteIsBatch: true,
  exportURL: "/school/student/export",
  dataForm: {
    name: "",
    classId: ""
  },
  filterText: "",
  deptList: []
});

const defaultProps = reactive({
  children: 'children',
  label: 'name'
})

const state = reactive({ ...useView(view), ...toRefs(view) });

onMounted(() => {
  getDeptList()
})

// 获取部门列表
const getDeptList = () => {
  return baseService.get("/data/class/list").then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    view.deptList = res.data;
  });
};
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const uploadBatchRef = ref();
const uploadBatchHandle = () => {
  uploadBatchRef.value.init();
};

const treeRef = ref()
const nodeCilck = () => {
  const node = treeRef.value.getCurrentNode();
  state.dataForm.classId = node.id
  state.getDataList()
}

const leadingInRef = ref();
const leadingInHandle = () => {
  leadingInRef.value.init({
    title: '学生',
    templateFile: '/src/assets/file/class-template.xlsx',
    uploadPath: '/data/personnel/student/import',
  });
};

</script>
<style lang="less" scoped>
.top-search {
  background-color: #fff;
  padding: 20px 30px 10px;
  border-radius: 10px;
  display: flex;

  /deep/ .el-form {
    width: 100%;
  }

  &_form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    &_btn {
      display: flex;
    }
  }
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 15px 0 0;

  .school-name {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
  }

  &-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>